<template>
    <div class="content_panel project_modules">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span>{{$t('collection.colPhase')}}</span>
            </h3>
            <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                <el-row>
                    <el-col :span="5">
                        <el-form-item prop="name">
                            <el-select v-model="form.name" clearable :placeholder="$t('collection.phaseName')" style="width: 100%"><!--阶段名称-->
                                <el-option v-for="item in phaseData" :key="item.id" :value="item.name" :label="item.name"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-button @click="search" type="primary">{{ $t('common.search') }}</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div><!--content_panel_top-->

        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <el-table ref="table" :data="tableData" style="width: 100%;" :max-height="tableMaxHeight" :highlight-current-row="true">
                        <el-table-column prop="name" :label="$t('collection.phaseName')" min-width="120"></el-table-column><!--阶段名称-->
                        <el-table-column prop="startDays" :label="$t('common.overdueDays')" min-width="180"><!--逾期天数-->
                            <template slot-scope="{ row }">{{ row.startDays }}{{ $t('common.day') }} ～ {{ row.endDays }}{{ $t('common.day') }}</template>
                        </el-table-column>
                        <el-table-column prop="isUse" :label="$t('common.status')" min-width="120"><!--状态-->
                            <template slot-scope="{ row }">{{ row.isUse | switchStatus }}</template>
                        </el-table-column>
                        <el-table-column prop="updateTime" :label="$t('collection.lastEdit')" min-width="180"><!--最近一次编辑-->
                            <template slot-scope="{ row }">{{ row.updateTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.operation')" min-width="220">
                            <template slot-scope="{ row }">
                                <el-button @click="editHandler(row)" type="text">{{ $t('finance.edit') }}</el-button><!--编辑-->
                                <el-button v-if="row.isUse === 1" @click="operateHandler(row,0)" type="text">{{ $t('collection.startUse') }}</el-button><!--启用-->
                                <el-button v-if="row.isUse === 0" @click="operateHandler(row,1)" type="text">{{ $t('common.close') }}</el-button><!--关闭-->
                                <el-button @click="showHistory(row)" type="text">{{ $t('collection.historyRecord') }}</el-button><!--历史记录-->
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--分页组件-->
                    <pagination @pageChange="pageChange" :page="page"><!--分页组件--></pagination>
                </div>
            </div>
        </div>

        <!--编辑弹窗-->
        <alert-dialog :visible.sync="editDialog.isVisible" :title="$t('collection.colPhase')"  dialog-position="center-center" :modal="true" width="700px" class="edit-dialog">
            <div>
                <el-form ref="editDialog.form" :model="editDialog.form" :rules="editDialog.rules" :inline="false" class="module_form">
                    <el-row>
                        <el-col :span="8" align="right">{{ $t('collection.phaseName') }}:</el-col>
                        <el-col :span="16">{{ editDialog.form.name }}</el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8" align="right">{{ $t('common.overdueDays') }}（-10 ~ 999）:</el-col>
                        <el-col :span="16">
                            <el-form-item prop="startDays" ref="editDialog.form.startDays">
                                <el-input v-model="editDialog.form.startDays" :placeholder="$t('verify.plsInput')" @blur="blurDays('endDays')" clearable></el-input>
                            </el-form-item>
                            <span style="margin:0 10px;">~</span>
                            <el-form-item prop="endDays" ref="editDialog.form.endDays">
                                <el-input v-model="editDialog.form.endDays" :placeholder="$t('verify.plsInput')" @blur="blurDays('startDays')" clearable></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="btn">
                        <el-col :span="8" align="right">&nbsp;</el-col>
                        <el-col :span="16">
                            <el-button @click="editDialog.isVisible = false" type="primary">{{ $t('common.cancel') }}</el-button>
                            <el-button @click="editSubmit" type="primary">{{ $t('common.confirm') }}</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </alert-dialog>

        <!--历史记录弹窗-->
        <el-dialog :visible.sync="historyDialog.isVisible" :title="$t('collection.historyRecord')" width="500px" class="operate-dialog">
            <div class="list">
                <p class="name">{{ $t('collection.phaseName') }}:{{ historyDialog.name }}</p>
                <div v-if="historyDialog.data && historyDialog.data.length >= 1" class="content">
                    <p v-for="item in historyDialog.data"><span class="time">{{ item.updateTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</span><span>{{ item.startDays }}{{ $t('common.day') }} ～ {{ item.endDays }}{{ $t('common.day') }}</span></p>
                </div>
                <div v-else>No Data</div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import Pagination from '@/components/pagination';
    import mixin from '@/service/mixin';
    import AlertDialog from '@/components/alert-dialog';

    let that = null;
    export default {
        name: 'collection-collection-phase',
        components: {
            Pagination,
            AlertDialog,
        },
        mixins: [mixin],
        data() {
            const checkStart = (rule, value, callback) => {
                const form = this.editDialog.form;
                if (form.startDays && form.endDays && Number(form.endDays) <= Number(form.startDays)) {
                    return callback(this.$t('collection.plsInputRightOverday'));
                }
                else if(Number(form.startDays) > 999 || Number(form.startDays) < -10) {
                    return callback(this.$t('collection.plsInputRightOverday'));
                }
                else {
                    callback();
                }
            };
            const checkEnd = (rule, value, callback) => {
                const form = this.editDialog.form;
                if (form.startDays && form.endDays && Number(form.endDays) <= Number(form.startDays)) {
                    return callback(this.$t('collection.plsInputRightOverday'));
                }
                else if(Number(form.endDays) > 999 || Number(form.endDays) < -10) {
                    return callback(this.$t('collection.plsInputRightOverday'));
                }
                else {
                    callback();
                }
            };
            return {
                tableData: [],
                form: {
                    name: '',
                },
                rules: {
                },
                phaseData: [],
                editDialog: {
                    isVisible: false,
                    form: {
                        name: '',
                        startDays: '',
                        endDays: '',
                    },
                    rules: {
                        startDays: [
                            {required: true, message: this.$t('collection.plsInputRightOverday'), trigger: 'blur'},
                            {pattern: /^-?[0-9]\d*$/, message: this.$t('collection.plsInputRightOverday'), trigger: 'blur'},
                            { validator: checkStart, trigger: 'blur' }
                        ],
                        endDays: [
                            {required: true, message: this.$t('collection.plsInputRightOverday'), trigger: 'blur'},
                            {pattern: /^-?[0-9]\d*$/, message: this.$t('collection.plsInputRightOverday'), trigger: 'blur'},
                            { validator: checkEnd, trigger: 'blur' }
                        ]
                    },
                },
                historyDialog: {
                    isVisible: false,
                    name: '',
                    data: [],
                }
            };
        },
        methods: {
            // 获取列表数据
            getTableData() {
                const form = this.form;
                const params = {
                    name: form.name,
                    active: 0
                };
                this.$api.collection.getCollectStages(params).then(res => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error && data) {
                        this.tableData = data;
                    }
                    this.tableMaxHeight = document.body.clientHeight - 170;
                });
            },
            // 获取阶段名称筛选数据
            getPhaseData() {
                const params = {
                    name: '',
                    active: 0
                };
                this.$api.collection.getCollectStages(params).then(res => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error && data) {
                        this.phaseData = data;
                    }
                });
            },
            search() {
                this.getTableData();
            },
            // 编辑
            editHandler(row) {
                this.editDialog.form = Object.assign(this.editDialog.form,row);
                this.editDialog.isVisible = true;
            },
            editSubmit() {
                this.$refs['editDialog.form'].validate((valid) => {
                    if (valid) {
                        const params = this.editDialog.form;
                        this.$api.collection.updateCollectStage(params).then(res => {
                            const {status, data, error, msg} = res;
                            if ('1' === status && '00000000' === error) {
                                this.getTableData();
                                this.$message.success(this.$t('common.successfulOperation'));
                                this.editDialog.isVisible = false;
                            }
                            else if('1' === status && '00000000' !== error){
                                this.$message.error(msg);
                            }
                        });
                    }
                })
            },
            blurDays(type) {
                this.$refs['editDialog.form.' + type].clearValidate();
            },
            operateHandler(row,isUse) {
                const params = {
                    id: row.id,
                    isUse: isUse
                };
                this.$api.collection.changeStageUse(params).then(res => {
                    const {status, error, msg} = res;
                    if ('1' === status && '00000000' === error) {
                        this.getTableData();
                        this.$message.success(this.$t('common.successfulOperation'));
                    }else if('1' === status && '00000000' !== error){
                        this.$message.error(msg);
                    }
                });
            },
            showHistory(row) {
                const params = {
                    name: row.name,
                    active: 1,
                    orderByType: 0
                };
                this.$api.collection.getCollectStages(params).then(res => {
                    const {status, data, error, msg} = res;
                    if ('1' === status && '00000000' === error) {
                        this.historyDialog.name = row.name;
                        this.historyDialog.data = data;
                        this.historyDialog.isVisible = true;
                    }
                });
            }
        },
        filters: {
            switchStatus(status) {
                switch (status + '') {
                    case '0':
                        return that.$t('collection.activated');// 已启用
                    case '1':
                        return that.$t('collection.closed');// 已关闭
                    default:
                        return status;
                }
            }
        },
        created() {
            that = this;
            this.getTableData();
            this.getPhaseData();
        }
    }
</script>
<style lang="scss" scoped>
    [data-page=collection-collection-phase] {
        .el-col {
            padding-left: 10px;
        }
        .el-table .cell, .el-table th > .cell {
            word-break: keep-all;
            word-wrap: break-word;
        }
        .edit-dialog {
            .el-row {
                line-height:40px;
            }
            .el-form-item {
                width:160px;
                display: inline-block;
            }
            .btn {
                padding-top:20px;
            }
        }
        .operate-dialog {
            line-height:24px;
            .list {
                .name {
                    font-weight: bold;
                }
                .content {
                    margin:10px 0 0 0;
                }
                .time {
                    width:220px;
                    display: inline-block;
                    vertical-align: middle;
                }
            }
        }
    }
</style>

